
import React from 'react'
import { sleep } from 'antd-mobile/es/utils/sleep'
import Menu from '@/views/Menu'

import '@/assets/css/OrderIndex.scoped.css'

const Component = () =>
{
  let [active, SetActive] = useState('all')
  let [page, SetPage] = useState(1)
  let busid = React.business.id ?? 0
  let [list, SetList] = useState([])
  let [hasMore, SethasMore] = useState(true)
  let ref = React.useRef(null)
  React.useEffect(()=>{
    orderList()
  },[])

  //选项卡切换
  const TabChange = async (key: string) => SetActive(key)

  //下拉刷新
  const onRefresh = async () =>
  {
    SetPage(1)
    SethasMore(true)
    SetList([])
    orderList()
  }

  //上拉加载
  const loadMore = async () =>
  {
    orderList()
  }
  const orderList = async () =>
  {
    var result = await React.request.post('/hotel/order',{busid,page})
    if(result.code == 0){
      SethasMore(false)

      return false
    }
    SetPage(++page)
    SethasMore(true)
    SetList(list.concat(result.data))
    
  }

  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部订单" key="all" />
        <React.UI.Tabs.Tab title="待评价" key="0" />
        <React.UI.Tabs.Tab title="退款" key="1" />
      </React.UI.Tabs>
      
      {/* 下拉列表  onRefresh 触发刷新时的处理函数*/}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        {/* 订单列表 */}
        <div className='order_list'>
          {list && list.map((item:any, key:number) => 
              <div className="item" key={key}>
                  <div className="item_top">
                      <p>{item.room.name}</p>
                      <div className="top_tag">{item.status_text}</div>
                  </div>

                  <div className="house">
                      <div className="item_swipers">
                          <img src={item.room.thumb_text} />
                      </div>
                      <div className="item_mask">订单实付：￥{item.price}</div>
                  </div>

                  <div className="item_bar">
                    <div className='time'>{item.starttime_text}</div>
                    <div className='action'>
                      <React.UI.Button color='success' size='small' onClick={() => React.navigate(`/order/comment?orderid=${item.id}`)}>立即评价</React.UI.Button>
                      <React.UI.Button color='warning' size='small' onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>查看详情</React.UI.Button>
                    </div>
                  </div>
              </div>
          )}
        </div>
        
        {/* 上拉加载 */}
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
      </React.UI.PullToRefresh>

      <Menu />
    </>
  )
}

export default Component